<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { computed } from 'vue'
// 路由
const router = useRouter()


// 获取当前时间
const currentTime = ref('')

// 更新时间的函数
const updateTime = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')
  currentTime.value = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`
}

// 按钮状态
const buttonStates = ref({
  modelTraining: 'normal',
  inferenceDemo: 'normal',
  home: '正常',
  user: '正常',
  nextStep: 'normal',
  prevStep: 'normal',
  startTrain: 'normal',
  taskImport: 'normal'
})

// 鼠标事件处理
const handleMouseEnter = (button) => {
  buttonStates.value[button] = '悬浮'
}

const handleMouseLeave = (button) => {
  buttonStates.value[button] = '正常'
}

const handleMouseDown = (button) => {
  buttonStates.value[button] = '点击'
}

const handleMouseUp = (button) => {
  buttonStates.value[button] = '悬浮'
}

// 推理演示相关数据
const currentStep = ref(1)
const selectedSource = ref('dataRepository')
const mediaType = ref('image')
const showInferenceDemo = ref(true)
const selectedDatasetId = ref(null)
const selectedWeightId = ref(null)

// 筛选类型数据
const filterTypeList = ref([
  { id: 1, name: '筛选类型1' },
  { id: 2, name: '筛选类型2' },
  { id: 3, name: '筛选类型3' },
  { id: 4, name: '筛选类型4' }
])
const selectedFilterTypes = ref([])

// 权重相关数据
const weightCreator = ref('')
const timeSort = ref('时间倒序')
const weightList = ref([
  { id: 1, name: '权重1', creator: '用户X', date: '2023/05/20', score: '98.5' },
  { id: 2, name: '权重2', creator: '用户Y', date: '2023/06/15', score: '95.2' },
  { id: 3, name: '权重3', creator: '用户X', date: '2023/07/10', score: '97.8' }
])

// 推理结果数据
const isInferencing = ref(false)
const inferenceProgress = ref(25)
const inferenceResults = ref([])

// 筛选后的权重列表
const filteredWeightList = computed(() => {
  let result = [...weightList.value]
  
  // 按创建者筛选
  if (weightCreator.value) {
    result = result.filter(item => item.creator === weightCreator.value)
  }
  
  // 按时间排序
  if (timeSort.value === '时间正序') {
    result.sort((a, b) => new Date(a.date) - new Date(b.date))
  } else {
    result.sort((a, b) => new Date(b.date) - new Date(a.date))
  }
  
  return result
})

// 模拟数据集数据
const datasets = ref([
  { datasetId: 1, name: '数据集1', status: 'unprocessed', progress: 30 },
  { datasetId: 2, name: '数据集2', status: 'formatted', progress: 60 },
  { datasetId: 3, name: '数据集3', status: 'filtered', progress: 100 },
  { datasetId: 4, name: '数据集4', status: 'unprocessed', progress: 20 },
  { datasetId: 5, name: '数据集5', status: 'formatted', progress: 75 },
  { datasetId: 6, name: '数据集6', status: 'filtered', progress: 100 }
])

// 模拟媒体文件数据
const mediaFiles = ref([])

// 获取状态图标
const getStatusIcon = (status) => {
  switch (status) {
    case 'unprocessed':
      return '/pic/dataManagement/未处理.png'
    case 'formatted':
      return '/pic/dataManagement/已格式化.png'
    case 'filtered':
      return '/pic/dataManagement/已完成筛选.png'
    default:
      return '/pic/dataManagement/未处理.png'
  }
}

// 选择数据集
const selectDataset = (dataset) => {
  selectedDatasetId.value = dataset.datasetId
  // 模拟加载媒体文件
  loadMediaFiles(dataset.datasetId)
}

// 加载媒体文件
const loadMediaFiles = (datasetId) => {
  // 模拟媒体文件数据
  const files = []
  for (let i = 1; i <= 9; i++) {
    files.push({
      id: i,
      name: `文件${i}.jpg`,
      thumbnail: `/pic/dataManagement/数据集.png`, // 使用数据集图标作为缩略图
      selected: false
    })
  }
  mediaFiles.value = files
}

// 切换文件选中状态
const toggleFileSelection = (file) => {
  file.selected = !file.selected
}
// 下一步
const goToNextStep = () => {
  if (currentStep.value < 2) {
    currentStep.value++
  }
  showInferenceDemo.value = false
  // showSelectWeight.value = true
}
// 返回主页
const goToHome = () => {
  router.push('/')
}
// 上一步
const goToFrontStep = () => {
  if (currentStep.value > 1) {
    currentStep.value--
  }
  showInferenceDemo.value = true
  // showSelectWeight.value = true
}

// 开始推理
const startInference = () => {
  router.push("/start-inference")
}

// 页面加载时获取算法列表
onMounted(() => {
  updateTime()
  // 每秒更新一次时间
  setInterval(updateTime, 1000)
})
</script>

<template>
  <div class="model-training-container">
    
    
    
    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 顶部栏 -->
      <div class="top-bar">
        <div class="system-name">算籌平台系统</div>
        <div class="home-button"
             @mouseenter="handleMouseEnter('home')"
             @mouseleave="handleMouseLeave('home')"
             @mousedown="handleMouseDown('home')"
             @mouseup="handleMouseUp('home')"
             @click="goToHome">
          <img :src="`/pic/dataManagement/首页-${buttonStates.home}.png`" alt="首页">
        </div>
        <div class="current-time">{{ currentTime }}</div>
        <div class="user-info">
          <div class="user-button"
               @mouseenter="handleMouseEnter('user')"
               @mouseleave="handleMouseLeave('user')"
               @mousedown="handleMouseDown('user')"
               @mouseup="handleMouseUp('user')">
            <img :src="`/pic/dataManagement/用户-${buttonStates.user}.png`" alt="用户">
          </div>
          <span class="username">用户：XXXX</span>
        </div>
      </div>
      
      
      <!-- 内容区域 -->
      <div class="content-area">
        <!-- 推理演示主体区域 -->
        <div class="inference-main">
          <div class="title-area">
            <div class="title">
              <img src="/pic/trainingManagement/icon.png" alt="推理演示">
              <span>推理任务创建</span>
            </div>
          
          <!-- 任务导入按钮 -->
          <div class="task-import-button"
               @mouseenter="handleMouseEnter('taskImport')"
               @mouseleave="handleMouseLeave('taskImport')"
               @mousedown="handleMouseDown('taskImport')"
               @mouseup="handleMouseUp('taskImport')">
            <img :src="
              buttonStates.taskImport === 'normal' ? '/pic/trainingManagement/任务导入-正常.png' : 
              buttonStates.taskImport === 'hover' ? '/pic/trainingManagement/任务导入-悬浮.png' : 
              '/pic/trainingManagement/任务导入-点击.png'" alt="任务导入">
          </div>
          </div>
          <!-- 虚线分隔线 -->
          <div class="divider-line">
            <img src="/pic/trainingManagement/虚线横向.png" alt="分隔线">
          </div>
          <!-- 新增的flex容器 -->
          <div class="steps-container">
            <!-- 步骤区域 -->
            <div class="steps-area">
              <div class="step">
                <div class="step-icon">
                  <img src="/pic/trainingManagement/1-正常.png" alt="步骤1">
                </div>
                
                <div class="step-arrow" v-if="currentStep === 1">
                  <img src="/pic/trainingManagement/步骤-箭头.png" alt="箭头">
                </div>
                <span>信号源选择</span>
                <div class="step-check" v-if="currentStep === 2">
                  <img src="/pic/trainingManagement/步骤-对号.png" alt="对号">
                </div>
              </div>
              <div class="step-divider">
                <img src="/pic/trainingManagement/虚线.png" alt="分隔线" style="margin-left: -30px">
              </div>
              <div class="step">
                <div class="step-icon">
                  <img :src="currentStep === 1 ? '/pic/trainingManagement/2-未激活.png' : '/pic/trainingManagement/2-正常.png'" alt="步骤2">
                </div>
                
                <div class="step-arrow" v-if="currentStep === 2">
                  <img src="/pic/trainingManagement/步骤-箭头.png" alt="箭头">
                </div>
                <span>权重选择</span>
              </div>
            </div>

            <!-- 信号源选择区域 -->
            <div class="signal-source-selection" v-if="showInferenceDemo">
              <div class="source-type">
                <span>信号源：</span>
                <select v-model="selectedSource">
                  <option value="dataRepository">数据仓库</option>
                  <option value="realTimeInference">实时推演</option>
                </select>
              </div>
              
              <!-- 数据仓库选择区域 -->
              <div class="data-repository-area" v-if="selectedSource === 'dataRepository'">
                <!-- 媒体类型选择 -->
                <div class="media-type-selection">
                  <div class="radio-group">
                    <label class="radio-item">
                      <input type="radio" v-model="mediaType" value="image">
                      <span>图像</span>
                    </label>
                    <label class="radio-item">
                      <input type="radio" v-model="mediaType" value="video">
                      <span>视频</span>
                    </label>
                  </div>
                  
                  <!-- 状态图标说明 -->
                  <div class="status-legend">
                    <div class="legend-item">
                      <img src="/pic/dataManagement/未处理.png" alt="未处理">
                      <span>未处理</span>
                    </div>
                    <div class="legend-item">
                      <img src="/pic/dataManagement/已格式化.png" alt="已格式化">
                      <span>已格式化</span>
                    </div>
                    <div class="legend-item">
                      <img src="/pic/dataManagement/已完成筛选.png" alt="已完成筛选">
                      <span>已完成筛选</span>
                    </div>
                  </div>
                </div>
                
                <!-- 数据集和媒体文件展示区域 -->
                <div class="dataset-media-container">
                  <!-- 数据集列表 -->
                  <div class="dataset-list-container">
                    <div class="dataset-list">
                      <div v-for="dataset in datasets" :key="dataset.datasetId" class="dataset-card"
                           @click="selectDataset(dataset)" 
                           :class="{selected: selectedDatasetId === dataset.datasetId}">
                        <div class="dataset-image">
                          <img src="/pic/dataManagement/数据集.png" alt="数据集">
                          <img :src="getStatusIcon(dataset.status)" alt="状态" class="status-icon">
                        </div>
                        <div class="dataset-info">
                          <div class="dataset-name">{{ dataset.name }}</div>
                          <div class="progress-bar">
                            <div class="progress" :style="{ width: dataset.progress + '%' }"></div>
                          </div>
                          <div class="progress-text">{{ dataset.progress }}%</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 媒体文件展示 -->
                <div class="media-files-container">
                  <div class="media-files">
                    <div v-for="file in mediaFiles" :key="file.id" class="media-file">
                      <img :src="file.thumbnail" alt="媒体文件">
                      <div class="media-file-name">{{ file.name }}</div>
                    </div>
                  </div>
                </div>
                </div>
                
                
              </div>
            </div>
            
            <!-- 实时推演选择区域 -->
            <div class="real-time-inference-area" v-if="selectedSource === 'realTimeInference'">
              <!-- 实时推演相关内容 -->
              <div class="real-time-content">
                <p>实时推演功能正在开发中...</p>
              </div>
            </div>
            <div class="weight-selection-container" v-if="!showInferenceDemo">
            <!-- 权重选择区域 -->
            <div class="section-title"  v-if="!showInferenceDemo">筛选类型：</div>
              <div class="filter-type-list">
                <div class="filter-type-item" v-for="type in filterTypeList" :key="type.id">
                  <input type="checkbox" :id="`type-${type.id}`" :value="type.id" v-model="selectedFilterTypes">
                  <label :for="`type-${type.id}`">筛选类型{{ type.id }}</label>
                </div>
              </div>
              <!-- 权重选择 -->
              <div class="weight-selection">
                <!-- 权重筛选区域 -->
                <div class="weight-filter-area">
                  <!-- 权重创建用户 -->
                  <div class="weight-creator">
                    <span>权重创建用户：</span>
                    <select v-model="weightCreator">
                      <option value="">全部用户</option>
                      <option value="用户X">用户X</option>
                      <option value="用户Y">用户Y</option>
                    </select>
                  </div>
                  
                  <!-- 时间排序 -->
                  <div class="time-sort">
                    <span>时间排序方式：</span>
                    <select v-model="timeSort">
                      <option value="时间正序">时间正序</option>
                      <option value="时间倒序">时间倒序</option>
                    </select>
                  </div>
                </div>
                
                <!-- 权重列表 -->
                <div class="weight-list">
                  <div class="weight-item" v-for="weight in filteredWeightList" :key="weight.id">
                    <div class="weight-header">
                      <input type="radio" :id="`weight-${weight.id}`" name="weight" :value="weight.id">
                      <label :for="`weight-${weight.id}`">权重{{ weight.name.slice(-1) }}</label>
                    </div>
                    <div class="weight-info">
                      <div>权重创建用户：{{ weight.creator }}</div>
                      <div>创建创建日期：{{ weight.date }}</div>
                      <div>得分：{{ weight.score }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          
          
          
          
            <!-- 按钮区域 -->
            <div class="button-area" v-if="showInferenceDemo">
              <button class="next-step-button"
                      @mouseenter="handleMouseEnter('nextStep')"
                      @mouseleave="handleMouseLeave('nextStep')"
                      @mousedown="handleMouseDown('nextStep')"
                      @mouseup="handleMouseUp('nextStep')"
                      @click="goToNextStep">
                下一步
              </button>
            </div>
            <div class="button-area-inference" v-if="!showInferenceDemo">
              <button class="front-step-button"
                      @mouseenter="handleMouseEnter('frontStep')"
                      @mouseleave="handleMouseLeave('frontStep')"
                      @mousedown="handleMouseDown('frontStep')"
                      @mouseup="handleMouseUp('frontStep')"
                      @click="goToFrontStep">
                上一步
              </button>
              <button class="start-inference-button"
                      @mouseenter="handleMouseEnter('startInference')"
                      @mouseleave="handleMouseLeave('startInference')"
                      @mousedown="handleMouseDown('startInference')"
                      @mouseup="handleMouseUp('startInference')"
                      @click="startInference">
                开始推理
              </button>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.dataset-media-container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  width: 85%;
}
.model-training-container {
  display: flex;
  width: 100%;
  height: 100vh;
  background-color: #f0f2f5;
}

.sidebar {
  width: 80px;
  background-color: #4a6baf;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
}

.logo img {
  width: 60px;
  height: auto;
}

.nav-buttons {
  margin-top: 20px;
}

.nav-button {
  margin-bottom: 10px;
  cursor: pointer;
}

.nav-button img {
  width: 60px;
  height: auto;
}
/* .sidebar-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  cursor: pointer;
  color: white;
} */

/* .sidebar-button img {
  width: 40px;
  height: 40px;
  margin-bottom: 5px;
} */


/* 主内容区域样式 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 内容区域样式 */
.content-area {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

/* 标题区域样式 */
.title-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title {
  display: flex;
  align-items: center;
}

.title img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.title span {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.section-title {
  font-weight: bold;
  margin-bottom: 10px;
}

.task-import-button {
  cursor: pointer;
}

.task-import-button img {
  height: 40px;
}

/* 推理演示主体区域 */
.inference-main {
  background-color: white;
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.steps-container {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  background-color: white;
}

.signal-source-selection {
  flex: 5;
}

.step {
  display: flex;
  align-items: center;
  margin-right: 40px;
  position: relative;
}

.step-icon img {
  width: 100px;
  height: 100px;
  margin-right: 10px;
}

.step span{
  font-size: 25px;
  font-weight: bold;
  margin-left: 20px;
}

.step-arrow {
  position: absolute;
  left: 95px;
  top: 50%;
  transform: translateY(-50%);
}

.step-arrow img {
  width: 20px;
  height: 20px;
}

.step-check {
  position: absolute;
  right: 78%;
  top: 50%;
  transform: translateY(-50%);
}

.step-check img {
  width: 20px;
  height: 20px;
}

/* 信号源选择区域 */
.signal-source-selection {
  margin-bottom: 30px;
}

.source-type {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.source-type span {
  margin-right: 10px;
  font-weight: bold;
}

.source-type select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 200px;
}

/* 媒体类型选择 */
.media-type-selection {
  margin-bottom: 20px;
}

.radio-group {
  display: flex;
  margin-bottom: 15px;
}

.radio-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
  cursor: pointer;
}

.radio-item input {
  margin-right: 5px;
}

/* 状态图标说明 */
.status-legend {
  display: flex;
  margin-bottom: 20px;
  gap: 20px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.legend-item img {
  width: 20px;
  height: 20px;
}

/* 数据集和媒体文件展示区域 */
.dataset-media-area {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  width: 45%;
}

.dataset-list-container {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px;
  max-height: 400px;
  overflow-y: auto;
}

.dataset-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.dataset-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s;
}

.dataset-card.selected {
  border: 2px solid #4a6baf;
}

.dataset-image {
  position: relative;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
}

.dataset-image img {
  width: 60px;
  height: 60px;
}

.status-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px !important;
  height: 20px !important;
}

.dataset-info {
  padding: 10px;
}

.dataset-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.progress-bar {
  height: 5px;
  background-color: #eee;
  border-radius: 3px;
  margin-bottom: 5px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background-color: #4a6baf;
}

.progress-text {
  font-size: 12px;
  color: #666;
  text-align: right;
}

/* 媒体文件展示 */
.media-files-container {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px;
  max-height: 400px;
  overflow-y: auto;
  width: 42%;
}

.media-files {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
}

.media-file {
  background-color: white;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.media-file img {
  width: 100%;
  height: 100px;
  object-fit: cover;
}

.media-file-name {
  padding: 8px;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 实时推演区域 */
.real-time-inference-area {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 20px;
  min-height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.real-time-content {
  text-align: center;
  color: #666;
}

/* 按钮区域 */
.button-area {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

/* 按钮区域 */
.button-area-inference {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.next-step-button {
  background-color: #4a6baf;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.next-step-button:hover {
  background-color: #3a5a9f;
}

.front-step-button {
  background-color: #4a6baf;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.front-step-button:hover {
  background-color: #3a5a9f;
}

/* 筛选类型样式 */
.filter-type-selection {
  margin-bottom: 20px;
}

.section-title {
  font-weight: bold;
  margin-bottom: 10px;
}

.filter-type-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.filter-type-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* 权重选择区域样式 */
.weight-selection {
  margin-bottom: 20px;
}

.weight-filter-area {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

.weight-creator,
.time-sort {
  display: flex;
  align-items: center;
  gap: 10px;
}

.weight-creator select,
.time-sort select {
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.weight-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
}

.weight-item {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
}

.weight-header {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
}

.weight-info {
  font-size: 14px;
  color: #666;
}

.top-bar {
  height: 60px;
  background-color: white;
  display: flex;
  align-items: center;
  padding: 12px 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.system-name {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.home-button {
  margin-left: 20px;
  cursor: pointer;
}

.current-time {
  margin-left: auto;
  color: #666;
}

.user-info {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.user-button {
  cursor: pointer;
  margin-right: 10px;
}

.username {
  color: #333;
}

.step-divider{
  margin-left: -50%;
}

.divider-line img{
  width: 100%;
  margin-bottom: 20px;

}

.weight-selection-container{
  width: 60%;
  margin-right: 10%;
}

/* 步骤区域样式 */
.steps-area {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  padding-left: 20px;
  flex: 1;
  margin-right: 20px;
}

</style>